<template>
    <div class="commentList">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>动态记录</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/dynamicList' }">动态列表</el-breadcrumb-item>
                <el-breadcrumb-item>评论记录</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;padding: 20px;background-color: #fff;">
            <div style="display: flex;align-items: center;flex-wrap: wrap;">
                <!-- <div style="display: flex;align-items: center; margin-right: 30px;">
            <el-input style="width: 300px;" clearable v-model="keyword" placeholder="请输入内容"></el-input>
            <el-button type="primary" size="medium" style="margin-left: 10px;" @click="SeachList">搜索</el-button>
        </div> -->
                <div style="display: flex;align-items: center; margin-right: 30px;">
                    <el-button type="primary" size="medium" @click="BackList">返回</el-button>
                </div>
                <!-- <div>
              <el-date-picker style="width: 420px;" @change="PickerChange" v-model="value2" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
              </el-date-picker>
              <el-button type="primary" size="medium" style="margin-left: 10px;" @click="Reset">重置</el-button>
          </div> -->
            </div>
        </div>
        <div class="commentBox">
          <div v-infinite-scroll="load" :infinite-scroll-disabled="disabled" style="overflow:auto;max-height:600px;background:#fff;">
            <div class="commentItem" v-for="(item,index) in commentList" :key="index">
                <div class="firstBox">
                    <div class="left">
                        <img :src="item.user_id.avatar?item.user_id.avatar.path:''" alt="">
                        <div class="cont">
                            <div class="name">{{item.user_id.username}}</div>
                            <div class="askCont">{{item.content}}</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="time">{{$moment(item.create_time*1000).format('yyyy-MM-DD HH:mm:ss')}}</div>
                        <div class="commentBtn">
                            <el-button type="primary" size="mini" @click="handleReply(item)">回复</el-button>
                            <el-button type="danger" size="mini" @click="toDelReply(item.id)">删除</el-button>
                        </div>
                    </div>
                </div>
                <!-- 回复 -->
                <div class="firstBox replyBox" v-for="(item1,index1) in item.sub_reply" :key="index1">
                    <div class="left">
                        <img :src="item1.user_id.avatar?item1.user_id.avatar.path:''" alt="">
                        <div class="cont">
                            <div class="name">{{item1.user_id.username}}</div>
                            <div class="askCont">
                                <div class="ask_item">
                                    回复
                                    <span class="name" style="margin-left:5px">{{item1.reply_id.username}}</span>
                                    ：
                                </div>
                                {{item1.content}}
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="time">{{$moment(item1.create_time*1000).format('yyyy-MM-DD HH:mm:ss')}}</div>
                        <div class="commentBtn">
                            <el-button type="primary" size="mini" @click="handleReply(item1)">回复</el-button>
                            <el-button type="danger" size="mini" @click="toDelReply(item1.id)">删除</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <p style="text-align:center;padding:10px 0;" v-if="loading">加载中...</p>
            <p style="text-align:center;padding:10px 0;" v-if="noMore">没有更多了</p>
          </div>
        </div>
        
        <el-dialog
            title="回复"
            :visible.sync="dialogVisible"
            width="30%">
            <div>
                <textarea name="" id="" style="padding:10px;width:100%;height:140px;border:1px solid #ccc" cols="30" v-model="content_com" rows="10" placeholder="请输入回复内容~"></textarea>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="toSubComment">确 定</el-button>
            </span>
        </el-dialog> 
    </div>
</template>

<script>
    export default {
        data(){
        return{
            page:1,
            pagesize:10,
            total:0,
            commentList:[],
            dialogVisible:false,
            replyInfo:{},
            content_com:'',
            loading:false,
            noMore:false,
            disabled:false,
            trendId:''
        }
    },
    mounted(){
      this.trendId = this.$route.query.id;
      this.getCommentList()
    },
    computed:{
       
    },
    methods: {
        // 加载
        load(){
            this.loading = true
            this.getCommentList('onReach')
        },

        // 获取评论列表
        getCommentList(type){
            if(type=='onReach'){
                this.page++
            }else{
                this.disabled = false
                this.page=1
                this.commentList = []
            }
            let params = {
                trend_id:this.trendId,
                page:this.page,
                pagesize:this.pagesize
            }
            this.$http.post('/api/root/dt/TrendComment/index',params).then(res=>{
                console.log(res,'评论列表');
                if(res.code==1){
                    if(type == 'onReach'){
                        if(!res.data.list.length){
                            this.noMore = true
                            this.loading = false
                            this.disabled = true
                        }
                        this.commentList = this.commentList.concat(res.data.list)
                    }else{
                        if(res.data.list.length<10){
                            this.noMore = true
                            this.loading = false
                            this.disabled = true
                        }
                        this.commentList = res.data.list?res.data.list:[];
                    }
                    this.total = res.data.total
                }
            })
        },

        // 回复
        handleReply(item){
            console.log(item,'----');
            this.dialogVisible = true
            this.replyInfo = item
        },
        // 回复确定
        toSubComment(){
            let params = {
                comment_id:this.replyInfo.id,
                content:this.content_com
            }
            this.$http.post('/api/root/dt/TrendComment/reply',params).then(res=>{
                console.log(res,'回复结果');
                if(res.code==1){
                    this.$message.success('回复成功')
                    this.dialogVisible = false;
                    this.content_com = ''
                    this.getCommentList()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

        // 删除评论
        toDelReply(id){
            this.$confirm('确定要删除该条评论吗？','提示',{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(()=>{
                this.$http.post('/api/root/dt/TrendComment/del',{id}).then(res=>{
                    console.log(res,'删除结果');
                    if(res.code==1){
                        this.$message.success('删除成功')
                        this.getCommentList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            })
        },

        // 返回按钮
        BackList(){
          this.$router.back(1)
        }
    }
  }
</script>

<style lang="less" scoped>
  .commentList{
      height: 100%;
      background-color: #f5f5f5;
  }
  .table-breadcrumb {
      height: 6%;
      min-height: 40px;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 10px;
  }
  
    .commentItem{
			width: 99%;
			padding: 20px 0;
			border-bottom: 1px solid #ccc;
			.name{color: #BBBBBB;}
			.firstBox{
				width: 100%;
				display: flex;
				justify-content: space-between;
				.left{
					width: 100%;
					display: flex;
					img{
						width: 50px;
						height: 50px;
						background-color: pink;
						border-radius: 50%;
					}
					.cont{
						margin-left: 10px;
						width: 80%;
						.askCont{
							margin-top: 5px;
							display: flex;
							.ask_item{ 
								flex-shrink: 0;
								display: flex;
								.ask_span{
									display: flex;
									align-items: center;
								}
							}
						}
					}
				}
				.right{
					.time{display: flex;width:130px;span{margin-left: 10px;}}
					.commentBtn{margin-top: 5px;display: flex;}
				}
			}
			.replyBox{
				width: 90%;
				margin-top: 15px;
				margin-left: 10%;
			}
		}
    .commentBox{
      padding-left: 20px;
      width: 100%;
      max-height: 600px;
      
    }
</style>